import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './src/pages/Home'
import Detail from './src/pages/Detail'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useEffect } from 'react';
import { Fontisto } from '@expo/vector-icons';
import { StatusBar } from 'expo-status-bar';
import { Text } from 'react-native';

const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()


const HomeScreen = ()=>{
  return (
    <Stack.Navigator
      screenOptions={{
        // headerBackTitleVisible:false,//设置返回箭头是否显示
        title: 'I am Detail',
        headerStyle: {
          backgroundColor: '#E3E49D',
        },
        
        headerTitleAlign:'center',
        headerTintColor: '#0F3581',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
      />
      <Stack.Screen 
        name='detail' 
        component={Detail}
      />
    </Stack.Navigator>
  )
}
const Setting = ()=>{
  return (
    <Text>设置页面</Text>
  )
}
  export default function App() {
    useEffect(()=>{

    })
    return(
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={{
            headerShown:false
          }} 
        >
          <Tab.Screen
          name='homeScreen'
          component={HomeScreen}
          options={{
            title:'首页',
            tabBarIcon:({color,size})=><Fontisto name="home" size={24} color="black" />
          }}
          />
          
          <Tab.Screen
            name='setting'
            component={Setting}
          />
          
        </Tab.Navigator>
        <StatusBar/>
      </NavigationContainer>
    )
  }